import { useEffect, useMemo, useState } from 'react';
import { Row, Col, Badge, Popover } from 'antd';
import { groupBy } from 'lodash';
import classNames from 'classnames';
import styles from './index.less';

const defaultDutyData = { 1: [], 2: [], 3: [], 4: [], 5: [] };

export default () => {
  const dutyInfo = useMemo(
    () => ({
      data: {
        result: [
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 1,
            xsName: '腾宁',
          },
          {
            week: 2,
            xsName: '阚梦',
          },
          {
            week: 2,
            xsName: '阚梦2',
          },
          {
            week: 2,
            xsName: '阚梦3',
          },
          {
            week: 3,
            xsName: '庞以欣',
          },
          {
            week: 3,
            xsName: '庞以欣2',
          },
          {
            week: 4,
            xsName: '蔺琦',
          },
          {
            week: 5,
            xsName: '上秋',
          },
        ],
      },
    }),
    [],
  );
  const [dutyData, setDutyData] = useState(defaultDutyData);

  useEffect(() => {
    if (dutyInfo) {
      setDutyData(groupBy(dutyInfo.data.result, 'week'));
    } else {
      setDutyData(defaultDutyData);
    }
  }, [dutyInfo]);

  const getCellContent = (week) => {
    const arr = dutyData[week];
    if (arr && Array.isArray(arr) && arr.length) {
      if (arr.length > 1) {
        return (
          <span>
            <Popover
              overlayClassName={styles.overlay}
              placement="bottom"
              trigger="click"
              content={
                <div>
                  {arr.map((x) => (
                    <p key={x.xsName}>{x.xsName}</p>
                  ))}
                </div>
              }
            >
              <Badge size="small" count={arr.length}>
                <a href="#">{arr[0].xsName}</a>
              </Badge>
            </Popover>
          </span>
        );
      }
      return <span>{arr[0].xsName}</span>;
    }
    return <span>&nbsp;</span>;
  };

  return (
    <div className={classNames(styles.wrapper)} style={{ display: 'flex' }}>
      <div className={classNames('bg', 'bg-1', styles['bg-1'])} />
      <div className={classNames('bg', 'bg-2')} />
      <Row className={styles['core-wrapper']} style={{ flexFlow: 'column', flex: 1 }}>
        <Col flex="52px">
          <Row className={classNames('linear-title', styles.title)} justify="center">
            <span>值日表</span>
          </Row>
        </Col>
        <Col flex="32px">
          <Row className="data-table-row" wrap={false}>
            <Col flex="80px" className="header">
              星期一
            </Col>
            <Col flex="80px" className="header">
              星期二
            </Col>
            <Col flex="80px" className="header">
              星期三
            </Col>
            <Col flex="80px" className="header">
              星期四
            </Col>
            <Col flex="80px" className="header">
              星期五
            </Col>
          </Row>
        </Col>
        <Col flex="auto" className="data-table-body">
          <Row className="data-table-row" wrap={false}>
            <Col flex="80px">{getCellContent('1')}</Col>
            <Col flex="80px">{getCellContent('2')}</Col>
            <Col flex="80px">{getCellContent('3')}</Col>
            <Col flex="80px">{getCellContent('4')}</Col>
            <Col flex="80px">{getCellContent('5')}</Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
};
